<template>
  <div class="main">
    <div class="datatext">
      <span class="line"></span>
      <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;筛选条件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="line"></span>
    </div>
    <el-form style="width:100%" :inline="true" :rules="rules" :model="screeninginfor" ref="screeninginfor" class="screeninginfor">
      <el-form-item label="签约开始时间" id="stop_signing_div">
        <el-date-picker v-model="start_signing_time" type="date" value-format="yyyy-MM-dd" placeholder="转咨询开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="签约结束时间" id="stop_signing_div">
        <el-date-picker v-model="stop_signing_time" type="date" value-format="yyyy-MM-dd" placeholder="转咨询结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" id="resourceanalysis" @click="customercontract()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="datatext">
      <span class="line"></span>
      <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;统计结果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="line"></span>
    </div>
    <template v-if="studetnList.length > 0">
      <div id="printTest1" v-for="student in studetnList" :key="student.id">
        <table width="100%" style="margin: auto!important;">
          <tbody>
            <tr style="height:40px">
              <td>{{student.name}}</td>
            </tr>
            <tr style="height:40px" v-for="item in studetnList" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.school}}</td>
            </tr>
            <!-- <tr style="height:40px" v-for="(p,index) in students_list" :key="p.id">
        <td>老客户</td>
        <td>{{listinfo.name}}</td>
        <td>前台电话</td>
        <td>{{listinfo.name}}</td>
        <td>市场部</td>
        <td>{{listinfo.name}}</td>
      </tr> -->
          </tbody>
        </table>
      </div>
    </template>

  </div>
</template>
<script>
//这个js是封装的url 请求接口是调用，可以看下方的request
export default {
  data() {
    return {
      listinfo: {
        name: "10",
      },
      studetnList: {
        id: '',
        name: '',
        school: ""
      },
      rules: {},
      screeninginfor: {},
      start_signing_time: '',
      stop_signing_time: '',
    }
  },
  created() {
    // this.customercontract();
  },
  methods: {
    async customercontract() {
      const res = await this.$ajax.post(`/customercontract/`, this.screeninginfor);
      let obj = JSON.parse(res.data)
      //提取地区表头字段
      this.studetnList = obj.res
      console.log('this.studetnList', this.studetnList);
    },
  }
}


</script>
<style scoped lang="less" >
//表格样式
#printTest1 .right .top .leader {
  float: left;
  margin-left: 30px !important;
}
#printTest1 .right .top {
  margin-top: 100px !important;
}
#printTest1 .right .top .official_seal {
  margin-right: 30px !important;
}
#printTest1 .bottom {
  margin-top: 10px !important;
}
#printTest1 .bottom .year,
#printTest1 .bottom .month {
  margin-right: 40px !important;
}
#printTest1 #title {
  padding-top: 50px !important;
  padding-bottom: 30px !important;
}
#printTest1 {
  width: 70%;
  margin: auto;
  margin-bottom: 50px;
  border: 2px solid black;
  // padding-bottom: 30px!important;
}
#printTest1 table {
  border-collapse: collapse;
}
#printTest1 table thead th {
  font-size: 20px;
  padding: 10px;
}
#printTest1 table tbody tr {
  height: 30px;
  font-size: 14px;
}
#printTest1 table tbody td {
  width: 25%;
  border: 1px solid black;
  text-align: center !important;
}
#printTest1 table tbody td span {
  margin-right: 20px;
}
//截至
.contents /deep/ .el-dialog__title {
  font-size: 15px !important;
}
.contents /deep/ .el-form {
  /*width: 410px!important;*/
  margin: auto !important;
}
.contents /deep/ .el-dialog__body {
  padding: 20px 10px !important;
}
.contents .ml {
  margin-bottom: 15px !important;
  border-left: 3px solid #447fc1;
  padding-left: 10px !important;
  font-size: 18px !important;
  font-weight: 500;
  font-size: 15px !important;
  margin-left: 15px !important;
}
.style /deep/ .el-input__inner {
  margin-bottom: 15px !important;
}
.contentdiv:hover {
  background-color: #094572;
  color: #fff;
}
.contentdiv_one:hover {
  background-color: #094572;
  color: #fff;
}

.contentdiv_one {
  width: 130px;
  display: inline-block;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #094572;
  padding: 10px 20px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  margin-left: 55px;
  margin-top: 30px;
}
.contentdiv {
  width: 130px;
  display: inline-block;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #094572;
  padding: 10px 20px;
  border-radius: 15px;
  margin-left: 60px;
  text-align: center;
  cursor: pointer;
  margin-top: 30px;
}
.el-button {
  margin-left: 70px;
  border-radius: 20px;
}
#imageshow {
  width: 600px;
  height: 250px;
  margin-left: 300px;
}
.el-button.is-round {
  margin-left: 70px;
}
.el-button {
  background: #fff;
  color: #094572;
}
.screeninginfor {
  margin-top: 30px;
}
.line {
  display: inline-block;
  width: 530px;
  border-top: 1px solid #cccccc;
  vertical-align: 5px;
  margin-top: 30px;
  font-weight: bold;
}
/* 筛选条件 */
.datatext {
  // margin-top: 50px;
  height: 30px;
  line-height: 36px;
  text-align: center;
  color: #094572;
  margin-left: 10px;
  margin-bottom: 50px;
}
.el-button:focus,
.el-button:hover {
  background: #094572;
  border-color: #271849;
  color: #fff;
}
.el-button--primary {
  margin-left: 100px;
  width: 220px;
  height: 40px;
  font-size: 18px;
  background-color: #094572;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  // margin-bottom: 50px;
  margin-top: 30px;
}
.el-table--border {
  margin-left: 4%;
}
.quantity {
  color: rgb(194, 187, 187);
}

#stop_signing_div {
  margin-left: 45px;
}
.screeninginfor {
  margin-top: 30px;
}
#resourceanalysis {
  margin-top: 0px;
  width: 200px;
}
.area_class {
  top: 30px;
  left: 45px;
  font-size: 18px;
}
.billstyle {
  text-align: center;
  display: block;
  width: 200px;
  height: 30px;
  background-color: #094572;
  color: #fff;
  margin-left: 155px;
  border-radius: 10px;
}
.tableClass {
  margin-left: 155px;
  width: 900px;
  // height: 300px;
  margin-bottom: 30px;
}
.table_class {
  width: 100%;
  margin: auto !important;
}
</style>
